<template>
	<view class="page_bg">
		<view class="section_1" @tap="show = true">
			<text>{{cateName || '请选择分类'}}</text>
			<u-icon name="arrow-down-fill"></u-icon>
		</view>
		<z-paging ref="paging" class="z-paging" v-model="practiceList" @query="getListByChapter"
			:empty-view-fixed="false" :hide-loading-more-when-no-more-by-limit="5">
			<view class="group_item" v-for="item in practiceList" :key="item._id">
				<view class="title">{{item.set_time + item.cate_name + '每日一练'}}</view>
				<view class="number">共{{item.questions.length}}题</view>
				<view class="btns">
					<block v-if="item.questions.length != item.history.length">
						<view class="btn r_btn" @tap="starDoing(item)">开始做题</view>
					</block>
					<block v-else>
						<view class="btn" @tap="checkAnswer(item)">查看解析</view>
						<view class="btn r_btn" @tap="starDoing(item)">重新做题</view>
					</block>
				</view>
			</view>
		</z-paging>
		<!-- 分类弹框 -->
		<u-popup v-model="show" mode="bottom" height="70%" :closeable="true">
			<view class="pop_bg">
				<view class="title">分类筛选</view>
				<view class="main">
					<scroll-view scroll-y scroll-with-animation class="left_scroll">
						<view v-for="(item,index) in treeDataF" :key="index" class="u-tab-item"
							:class="index == leftSelect ? 'u-tab-item-active' : ''" @click="leftSelect = index">
							<text class="u-line-1">{{item.name}}</text>
						</view>
					</scroll-view>
					<block v-for="(item,index) in treeDataF" :key="index">
						<scroll-view scroll-y class="right_scroll" v-if="leftSelect == index">
							<view class="page-view">
								<view class="thumb-box" v-for="son in item.children" :key="son.id" @tap="screen(son)">
									{{son.name}}
								</view>
							</view>
						</scroll-view>
					</block>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="modalShow" content="当前题库没有更多题目..."></u-modal>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				cateName: '',
				cateId: '',
				treeDataF: [],
				practiceList: [],

				collHeadStyle: { padding: '28rpx 20rpx' },
				itemStyle: { borderBottom: '2rpx solid #f9f9f9' },
				show: false,
				leftSelect: 0, // 左侧分类选中项
				modalShow: false
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			init(options) {
				that.cateId = options.cateId
				that.cateName = options.cateName
				that.getCategories()
			},
			// 请求分类数据
			getCategories() {
				vk.callFunction({
					url: 'client/course/pub/categories',
					success(data) {
						let tree = vk.pubfn.arrayToTree(data.rows, {
							id: "_id",
							parent_id: "parent_id",
							children: "children"
						});
						that.treeDataF = tree
					}
				})
			},
			// 请求每日一练数据
			getListByChapter(pageIndex, pageSize) {
				vk.callFunction({
					url: 'client/quest-bank/kh/everyday/getEverydayPracticeList',
					title: '请求中...',
					data: {
						cateId: that.cateId,
						cateName: that.cateName,
						need_user_info: true
					},
					success(data) {
						if (data.msg == 'bank-no-questions') that.modalShow = true
						that.$refs.paging.complete(data.rows)
					}
				})
			},
			// 筛选完成
			screen(son) {
				this.show = false
				this.$nextTick(() => {
					this.cateId = son._id
					this.cateName = this.treeDataF[this.leftSelect].name + son.name
					that.$refs.paging.reload();
				})
			},
			// 做题模式选择页面
			starDoing(item) {
				uni.navigateTo({
					url: `/pages/question-bank/practice-page?pageTitle=每日一练&id=${item._id}`
				});
			},
			// 练习模式解析开启
			checkAnswer(item) {
				uni.navigateTo({
					url: `/pages/question-bank/practice-page?pageTitle=每日一练&id=${item._id}&check=true`
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		height: 100vh;
		background-color: #F5F5F5;
		position: relative;
	}

	.section_1 {
		padding: 16rpx 20rpx 14rpx 21rpx;
		color: rgb(51, 51, 51);
		font-size: 28rpx;
		line-height: 34rpx;
		white-space: nowrap;
		background-color: rgb(253, 211, 3);
		box-shadow: 0px 3rpx 6rpx 0px rgba(255, 150, 12, 0.32);
		border-radius: 32rpx;
		position: absolute;
		top: 14rpx;
		left: 30rpx;

		.u-icon {
			margin-left: 6rpx;
		}
	}

	.z-paging {
		margin-top: 90rpx;
		background-color: #FFFFFF;

		.group_item {
			font-size: 24rpx;
			color: #333333;
			border-bottom: 2rpx solid #F0F0F0;
			padding: 32rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.title {
				width: 100%;
				margin-bottom: 32rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.number {
				flex: 1;
				color: #999999;
			}

			.btns {
				display: flex;
				align-items: center;

				.btn {
					padding: 9rpx 27rpx;
					border-radius: 30rpx;
					border: 1rpx solid #333333;
					background: #FFFFFF;
					margin-left: 12rpx;
					font-size: 20rpx;
				}

				.r_btn {
					background: #333333;
					color: #FFFFFF;
				}
			}
		}
	}

	.pop_bg {
		padding: 30rpx;
		box-sizing: border-box;
		height: 100%;

		.title {
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
		}

		.main {
			height: calc(100% - 50rpx);
			margin-top: 10rpx;
			overflow: hidden;
			display: flex;

			.left_scroll {
				height: 100%;
				width: 30%;

				.u-tab-item {
					height: 110rpx;
					background: #f6f6f6;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #444;
					font-weight: 400;
					line-height: 1;
				}

				.u-tab-item-active {
					position: relative;
					color: #000;
					font-size: 26rpx;
					font-weight: 600;
					background-color: #FFFFFF;
				}

				.u-tab-item-active::before {
					content: "";
					position: absolute;
					border-left: 4px solid #FF960C;
					height: 32rpx;
					left: 0;
					top: 39rpx;
				}
			}

			.right_scroll {
				width: 70%;
				padding: 30rpx 0 0 20rpx;

				.page-view {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.thumb-box {
						background: #F5F5F5;
						border-radius: 6px;
						width: 47%;
						padding: 21rpx 0;
						text-align: center;
						margin-bottom: 30rpx;
					}
				}
			}
		}
	}
</style>
